<template>
	<view>
		<view style="padding-top: 10px">
			<view class="content-box">
				<view class="tjr">
					<view class="name" id="tjr">{{isNull(pinpaiInfo.tuijianren)?"":pinpaiInfo.tuijianren.usersName}}</view>
					<view class="info"><image src="../../static/center/tjr.png">推荐人</view>
				</view>
				<view class="tuandui">
					<view><view class="name" id="tuandui">{{pinpaiInfo.teamNum}}</view>人</view>
					<view class="info" @click="checkTuandui()"><image src="../../static/center/td.png">团队人数<span style="margin-left: 6px;font-weight: bold;">></span></view>
				</view>
				<view class="fensi">
					<view> <view class="name" id="fensi">{{fensi}}</view>人</view>
					<view class="info" @click="checkFensi()"><image src="../../static/center/fensi.png">粉丝人数<span style="margin-left: 6px;font-weight: bold;">></span></view>
				</view>
			</view>
			<view class="tixian-box">
				<view>
					<view class="pinpai-name" style="font-size: 17px;">{{pinpaiInfo.ppPingpai.name}}</view> 
					<image :src="swichLogo(pinpaiInfo.ppPingpai.logo)" id="pinpailogo" style="width: 40px;height: 40px;" /> 
				</view>
				<view class="ke-tixian">
					<view style="font-size: 12px;margin-bottom: 10px">可提现</view>
					<view> <span class="icon">￥</span><span id="ketixian">{{pinpaiInfo.tixianMoney}}</span></view>
					<view id="jinyong" style="font-size: 10px;" v-if="pinpaiInfo.status==0">该品牌已禁用，请尽快提现</view>
				</view>
				<view class="tixian-btn">
					<view id="tixianBtn" @click="goTixian()">提现</view>
					<view style="font-size: 12px;margin-left: 10px;color: #6aa8f9;" @click="checkRecords()">提现记录</view>
				</view>
			</view>
			<view id="qrcodebox">
				<view class="qrhead">
					<view>我的推荐二维码</view>
					<view v-if="!isErweima" @click="xianAndyin()"><u-icon name="arrow-down"></u-icon></view>
					<view v-if="isErweima" @click="xianAndyin()"><u-icon name="arrow-up"></u-icon></view>
				</view>
				<view style="text-align: center">
					<view id="qrcode" v-if="isErweima">
						<image :src="qrcodeURL" style="width: 140px;height: 140px;"></image>
					</view>
				</view>
			</view>
			<view class="jiangli-box">
				<view style="font-size: 17px;">奖励</view>
				<view class="jiangli-items">
					<view><image src="../../static/center/daishouyi.png">待收益： <span class="zongIncome">{{isNull(shouyiInfo.daiShouyi)?0:shouyiInfo.daiShouyi}}</span></view>
					<view><image src="../../static/center/ketixian.png">可提现： <span class="ketixian">{{isNull(shouyiInfo.keTixian)?0:shouyiInfo.keTixian}}</span></view>
					<view><image src="../../static/center/tixianzhong.png">提现中： <span class="tixianzhong">{{isNull(shouyiInfo.tixianZhong)?0:shouyiInfo.tixianZhong}}</span></view>
					<view><image src="../../static/center/yitixian.png">已提现： <span class="yitixian">{{isNull(shouyiInfo.yiTixian)?0:shouyiInfo.yiTixian}}</span></view>
					<view><image src="../../static/center/shixiao.png">已失效： <span class="yishixiao">{{isNull(shouyiInfo.yishixiao)?0:shouyiInfo.yishixiao}}</span></view>
				</view>
			</view>
			<view style="margin: 20px 0 20px 0;text-align: center">
				<view style="color: #999999;font-size: 14px;" @click="goDetail()">奖励明细<span style="margin-left: 6px;font-weight: bold;">></span></view>
			</view>
		</view>
	</view>
</template>

<script>
	import Qr from '@/components/wxqrcode/wxqrcode.js'
	export default {
		data() {
			return {
				ppid:'',					//品牌ID
				pinpaiInfo:'',				//品牌信息
				fensi:0,					//粉丝数量
				shouyiInfo:'',				//收益信息
				isErweima:false,			//是否显示推荐二维码
				qrcodeURL: "",				//二维码地址
			}
		},
		onLoad(opt) {
			this.ppid = opt.ppid
			this.getShouyiInfo()
			this.buildQrcode(opt.ppid)
			uni.$on('userTixian', this.getShouyiInfo)
		},
		methods: {
			//得品牌收益信息
			getShouyiInfo(){
				//获取品牌信息
				this.$http.get('/ppUserPingpai/searchUserPingpaiDetail',{
					ppid: this.ppid,
					userId:uni.getStorageSync('usersId')
				}).then(res => {
					console.log(res.data)
					this.pinpaiInfo = res.data.data[0]
				})
				//获取粉丝
				this.$http.get('/ppUserPingpai/getFensi',{
					ppid: this.ppid,
					userId:uni.getStorageSync('usersId')
				}).then(res => {
					console.log(res.data)
					if(res.data.code==200){
						this.fensi = res.data.data.length
					}
				})
				//获取收益汇总
				this.$http.get('/ppgsluishui/huizong',{
					ppid: this.ppid,
					userid:uni.getStorageSync('usersId')
				}).then(res => {
					console.log(res.data)
					if(res.data.code==200){
						this.shouyiInfo = res.data.data
					}
				})
			},
			//处理图片
			swichLogo(logo){
				return this.host+'/image/pingpaiLogo/'+logo
			},
			//查看团队信息
			checkTuandui(){
				uni.navigateTo({
					url:'tuanduiRecord?ppid='+this.ppid
				})
			},
			//查看团队信息
			checkFensi(){
				uni.navigateTo({
					url:'fensiRecord?ppid='+this.ppid
				})
			},
			//二维码的显示和隐藏
			xianAndyin(){
				this.isErweima = !this.isErweima
			},
			//生成二维码
			buildQrcode(ppid){
				if(uni.getStorageSync('logined') && !this.isNull(ppid)){
					// this.qrcodeURL = Qr.createQrCodeImg('https://www.baidu.com')
					let url = this.host+"/share/go?ppid="+ppid+"&tjr="+uni.getStorageSync('usersId')
					this.qrcodeURL = Qr.createQrCodeImg(url,{
						typeNumber : 8
					})
				}else{
					this.qrcodeURL = Qr.createQrCodeImg("请先登录")
				}
			},
			//用户提现
			goTixian(){
				uni.navigateTo({
					url:'userTixian?ppid='+this.ppid+'&ketixianMoney='+this.pinpaiInfo.tixianMoney
				})
			},
			//查看用户提现记录
			checkRecords(){
				uni.navigateTo({
					url:'userTixianRecord?ppid='+this.ppid
				})
			},
			//跳转奖励明细
			goDetail(){
				uni.navigateTo({
					url:'jiangliRecord?ppid='+this.ppid+'&index=-1'
				})
			},
			//判空
			isNull(str){
				return str==null || str=="" || str==undefined
			}
		}
	}
</script>

<style>
	.content-box{
	   background-color: white;
	   display: flex;
   }
	.content-box>view{
		flex: 1;
		text-align: center;
		padding: 10px 0px;
		display: flex;
	   flex-direction: column;
		justify-content: space-between;
	}
	.content-box .name{
		display: inline-block;
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
		font-weight: bold;
	}
	.content-box image{
		width: 14px;
		height: 14px;
		margin-right: 5px;
	}
	.content-box .info{
		font-size: 14px;
	}
	.tixian-box{
		margin-top: 10px;
		display: flex;
		background-color: white;
		justify-content: space-around;
		padding: 20px 20px 10px 20px;
	}
	.tixian-box .icon{
		color: #e70101;
		font-size: 10px;
	}
	#ketixian{
		color: #e70101;
		font-size: 22px;
		font-weight: bold;
	}
	#tixianBtn{
		background-color: #e60000;
		padding: 5px 20px;
		margin-top: 5px;
		color: white;
		border-radius: 5px;
		font-size: 12px;
		margin-bottom: 10px;
	}
	.jiangli-box{
		margin-top: 10px;
		background-color: white;
		padding: 10px;
	}
	.jiangli-box .jiangli-items view{
		padding: 5px 0px;
		border-bottom: 1px dashed #ccc;
		margin-bottom: 5px;
	}
	.jiangli-items image{
		width: 20px;
		height: 20px;
		margin-right: 10px;
		vertical-align: middle;
	}
	.jiangli-items span::before{
		content: '￥';
		font-size: 10px;
	}
	.jiangli-items span{
		color: #ff3333;
	}
	.jiangli-items view{
		font-size: 17px;
	}
	.qrhead{
		display: flex;
		font-size: 17px;
		padding: 0 10rpx 0 10rpx;
		justify-content: space-between;
	}
	#qrcodebox{
		margin-top: 10px;
	}
</style>
